<script setup>

//npm install vue-router 
  import {useRouter} from 'vue-router'
  //useRouter可以创建一个新的路由对象，触发路由跳转，实现编程路由！
  var router = useRouter();
  let jumpDetail=()=>{
    router.push("/detail");  // == <router-link to="/detail">
  }

  let jumpList=()=>{
    router.push("/list");
  }

</script>

<template>
  <div>

    <!-- 准备两个点击触发按钮-->
     <button @click="jumpList()">跳转到list</button>
     <router-link to="/list">list</router-link> ||
     <router-link to="/detail">detail</router-link>
     <button @click="jumpDetail()">跳转到detail</button>
 
    <!-- 准备vue的显示区域
        router-view -》 展示跳转的vue组件
        默认路由视图，点击的时候，子此处打开！默认路由视图只能有一个
    -->
    <router-view></router-view>

  </div>
</template>

<style scoped>

</style>